@import "common.scss";
@function getvw($w){
    @return ($w/750)*100+vw;
}
%title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
        display: flex;
        align-items: center;
    i{
        font-size: getvw(55);
        color: #ff9344;
    }
   
    p{
        text-indent: getvw(8);
    }
    }
    .right{
            display: flex;
            align-items: center;
            p{
                margin-right: getvw(8);
            }
            i{
                color: #ff9344;
            }
    }
}
.wrap{
    header{
        display: flex;
        flex-direction: column;
        align-items: center;

        .search{
            padding: getvw(35) getvw(0);
            position: relative;
            width: getvw(265);
            input{
                width: getvw(265);
                height: getvw(50);
                border: 1px solid #ff9344;
                border-radius: getvw(50);
                font-size: getvw(24);
                padding: 0 getvw(25);
            }
            i{
                font-size: getvw(30);
                color:#ff9344;
                position: absolute;
                right: getvw(24);
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .weSearch{
            width: getvw(520);
            display: flex;
            flex-wrap:wrap ;
            .box{
                margin: getvw(2);
                width: getvw(125);
                height: getvw(64);
                background-color:#dcdcdc;
                color: #898989;
                display: flex;
                justify-content: center;
                align-items: center

            }
        }
    }
    main{
        .contentBox1{
            .title{
                @extend %title;
            }
            .bigBox{
                display: flex;
                justify-content: center;
                margin-bottom: getvw(50);
                .left{
                    flex-shrink: 0;
                    width: getvw(280);
                    height: getvw(350);
                    margin: getvw(5);
                    
                }
                .right{
                    display: flex;
                    flex-wrap: wrap;
                   
                   .imgbox{
                    margin: getvw(5);
                  
                    &:nth-child(1){
                        width: getvw(420);
                        height: getvw(150);
                    }
                    &:nth-child(2){
                        width: getvw(190);
                        height: getvw(190);
                    }
                    &:nth-child(3){
                        width: getvw(215);
                        height: getvw(190);
                        
                    }
                   }
                   
                }
            }
        }
        .contentBox2{
            .title{
                @extend %title;
            }
            .bigBox{
                margin: getvw(40) 0 getvw(50);
                display: flex;
                justify-content: space-around;
                .box{
                    
                    width: getvw(230);
                    height: getvw(200);
                }
            }
        }
    }
}